<!DOCTYPE html>
<html lang="en" data-ng-app>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">

<title>Dashboard Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link rel='stylesheet'
	href="webjars/bootstrap/3.1.0/css/bootstrap.min.css">


<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->



<style type="text/css">

/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
	padding-top: 50px;
}

/*
 * Global add-ons
 */
.sub-header {
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
	display: none;
}

@media ( min-width : 768px) {
	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
		display: block;
		padding: 70px 20px 20px;
		background-color: #f5f5f5;
		border-right: 1px solid #eee;
	}
}

/* Sidebar navigation */
.nav-sidebar {
	margin-left: -20px;
	margin-right: -21px; /* 20px padding + 1px border */
	margin-bottom: 20px;
}

.nav-sidebar>li>a {
	padding-left: 20px;
	padding-right: 20px;
}

.nav-sidebar>.active>a {
	color: #fff;
	background-color: #428bca;
}

/*
 * Main content
 */
.main {
	padding: 20px;
}

@media ( min-width : 768px) {
	.main {
		padding-left: 40px;
		padding-right: 40px;
	}
}

.main .page-header {
	margin-top: 0;
}

/*
 * Placeholder dashboard ideas
 */
.placeholders {
	margin-bottom: 30px;
	text-align: center;
}

.placeholders h4 {
	margin-bottom: 0;
}

.placeholder {
	margin-bottom: 20px;
}

.placeholder img {
	border-radius: 50%;
}
</style>



</head>

<body data-ng-controller="ChatController">

	<div class="navbar navbar-inverse navbar-fixed-top" data-role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Project name</a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Dashboard</a></li>
					<li><a href="#">Settings</a></li>
					<li><a href="#">Profile</a></li>
					<li><a href="#">Help</a></li>
				</ul>
				<form class="navbar-form navbar-right">
					<input type="text" class="form-control" placeholder="Search...">
				</form>
			</div>
		</div>
	</div>

	<div class="container-fluid" data-ng-init="init()">
		<div class="row">

			<div class="col-sm-9 col-md-10 ">
				<div class="panel panel-primary" >
				<!-- Default panel contents -->
				<div class="panel-heading" >Room - {{some}} - {{counter }}</div>

				<div class="row">
					<div class="col-md-9">
						<div style="height: 400px; overflow: auto;">
							<table class="table table-stripped">
								<tr data-ng-repeat="m in messages">
									<td>{{m.time | date:'shortDate'}}
										{{m.time|date:'shortTime'}} - {{m.user}} - {{m.content}}</td>
								</tr>

							</table>
						</div>
					</div>
					<div class="col-md-3">hi</div>
				</div>

				<div class="panel-footer">
					<div class="row">
						
						<div class="col-md-8"> 
						<div class="input-group">
      						<textarea   class="form-control" data-ng-model="message"></textarea>
      						
      						<span>{{message}}</span>
      						
      						<span class="input-group-btn">
        						<button class="btn btn-success btn-lg" type="button" data-ng-click="sendMsg()">Go!</button>
      						</span>
    					</div>
						</div>
						

					</div>
				</div>

			</div>
				
				
			</div>

			<div class="col-sm-3 col-md-2"></div>

		</div>
		
		<hr>
		
		<footer>
        <p>&copy; Company 2013</p>
      </footer>
		
	</div>

	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script type="text/javascript"
		src="webjars/jquery/1.10.2/jquery.min.js"></script>

	<script type="text/javascript"
		src="webjars/angularjs/1.2.9/angular.min.js"></script>

	<script type="text/javascript"
		src="webjars/bootstrap/3.1.0/js/bootstrap.min.js"></script>
	<script type="text/javascript"
		src="webjars/sockjs-client/0.3.4/sockjs.min.js"></script>
	<script type="text/javascript"
		src="webjars/stomp-websocket/2.3.0/stomp.min.js"></script>


	<script type="text/javascript">
		var socket;
		var stompClient;

		function ChatController($scope) {
			
			
			$scope.some = "";
			$scope.counter = 0;
			
			
			$scope.message = "";
			$scope.messages = [];

			$scope.init = function() {

				socket = new SockJS("/panchoo/chat");
				stompClient = Stomp.over(socket);

				stompClient.connect(' ', ' ', handleConnect);

			}

			$scope.sendMsg = function() {

				stompClient.send("/app/chat", {}, JSON.stringify({
					'content' : $scope.message
				}));

				$scope.message = "";
				
				$scope.some = "Message sent";
				
				$scope.counter = $scope.counter + 1;
			}

			handleConnectError = function(error) {
				//alert("STOMP protocol error " + error);
			}

			handleConnect = function(frame) {

				//subscribe to msg queue
				stompClient.subscribe("/topic/chat", function(m) {
					//alert('received msg');
					if (m.body) {
						//alert('Len = ' + $scope.messages.length);
						$scope.messages.unshift(JSON.parse(m.body));

						if ($scope.messages.length > 25) {
							//delete the last item 
							$scope.messages.pop();
						}

						$scope.$apply();
					} else {
						alert("got empty message");
					}

				});

			}

		}
	</script>



</body>
</html>
